import { h } from "snabbdom";
import { handleSSMLRemarkClick, handleUnwrapNodes } from '../helper'
export default {
    type: "ssml-phoneme",
    renderElem: function (elem, _children, editor) {
        // 将elem转换为Break类型，这里假设elem已经包含了Break类型所需的属性
        const ssml_elem = elem;
        console.log(_children)
        return h(
            "span",
            {
                className: "ssml-wrapper",
            },
            [
                h(
                    "span",
                    {
                        className: "remarkWrapper",
                        contentEditable: false,
                        style: {backgroundColor: 'var(--ssml-phoneme)'},
                        on: {
                            mousedown: function (event) {
                                event.preventDefault();
                            },
                            click: function (event) {
                                event.preventDefault();
                                console.log("handleSSMLRemarkClick")
                                handleSSMLRemarkClick(editor, ssml_elem);
                            },
                        },
                    },
                    [       
                        h("span", {
                                className: "data-content",
                                contentEditable: false,
                                "data-content": ssml_elem.remark,
                            },
                            // ssml_elem.remark
                        ),
                        h("span", 
                        {    
                            className: "iconfont icon-roundclosefill", 
                            contentEditable: false,
                            style:{marginLeft:'2px'},                 
                            on: {
                                click: function(event) {   
                                    event.preventDefault(); 
                                    console.log("handleDeleteNode")                               
                                    handleUnwrapNodes(editor, ssml_elem)                               
                                },
                            },
                        },
                    
                    ),
                    ]
                ),
                h("span",  
                    {
                        contentEditable: false,
                        style: { color: "var(--ssml-phoneme)", "user-select": "none"},  
                    }, 
                    "【"
                ),
                h("span",  
                    _children
                ),
                h("span",  
                    {
                        contentEditable: false,
                        style: { color: "var(--ssml-phoneme)", "user-select": "none"},  
                    }, 
                    "】"
                ),
                
            ]
        );
    },
};
